<template>
	<div class="container">
		<div class="gap-16px technician-card">
			<div class="col p-8">
				<el-statistic :value="statistic.technician.sum">
					<template #title>
						<div style="display: inline-flex; align-items: center">
							总技师人数
						</div>
					</template>
					<template #suffix>人</template>
				</el-statistic>
				<div class="statistic-footer">
					<div class="footer-item">
						<span>休息中技师</span>
						<span class="data-down">{{statistic.technician.resting}}</span>
					</div>
				</div>
			</div>
			<div class="col p-8">
				<el-statistic :value="statistic.technician.idle">
					<template #title>
						<div style="display: inline-flex; align-items: center">
							空闲技师
							<el-tooltip effect="dark" content="今日已排班未上钟技师" placement="top">
								<AppIcons icon="Warning" :size="12" style="margin-left: 4px" />
							</el-tooltip>
						</div>
					</template>
					<template #suffix>人</template>
				</el-statistic>
				<div class="statistic-footer">
					<div class="footer-item">
						<span>上钟技师</span>
						<span class="data-down">{{statistic.technician.working}}</span>
					</div>
				</div>
			</div>
			<div class="col p-8">
				<div class="el-statistic" v-if="shops&&shops.length>0">
					<div class="el-statistic__head">
						<div style="display: inline-flex; align-items: center;">
							门店筛选
							<el-tooltip effect="dark" content="默认为商户数据，可切换查看门店数据" placement="top">
								<AppIcons icon="Warning" :size="12" style="margin-left: 4px" />
							</el-tooltip>
						</div>
					</div>
					<div class="el-statistic__content">
						<el-select v-model="search.shop_id" placeholder="切换门店数据" size="large" style="width: 100%"
							clearable @change="initify">
							<el-option v-for="item in shops" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</div>
				</div>
			</div>
			<div class="col p-8 pointer" @click="goToAlarm">
				<el-statistic :value="statistic.technician.alarm">
					<template #title>
						<div style="display: inline-flex; align-items: center">
							一键报警
							<el-tooltip effect="dark" content="待处理一键报警信息" placement="top">
								<AppIcons icon="Warning" :size="12" style="margin-left: 4px" />
							</el-tooltip>
						</div>
					</template>
					<template #suffix>条</template>
				</el-statistic>
				<div class="statistic-footer">
					<div class="footer-item">
						<span>请及时处理报警信息</span>
					</div>
				</div>
			</div>
		</div>
		<div class="gap-16px">
			<div class="col statistic-card">
				<el-statistic :value="statistic.today.person_time">
					<template #title>
						<div style="display: inline-flex; align-items: center">
							人次
						</div>
					</template>
					<template #suffix>人</template>
				</el-statistic>
				<div class="statistic-footer">
					<div class="footer-item">
						<span>昨日</span>
						<span
							:class="{'data-down':statistic.growth_rate.person_time<0,'data-up':statistic.growth_rate.person_time>0}">
							{{statistic.yesterday.person_time}} | {{statistic.growth_rate.person_time}}%
							<AppIcons icon="CaretTop" class="up-icon" :size="14" />
							<AppIcons icon="CaretBottom" class="down-icon" :size="14" />
						</span>
					</div>
				</div>
			</div>
			<div class="col statistic-card">
				<el-statistic :value="statistic.today.duration">
					<template #title>
						<div style="display: inline-flex; align-items: center">
							服务时长
						</div>
					</template>
					<template #suffix>分钟</template>
				</el-statistic>
				<div class="statistic-footer">
					<div class="footer-item">
						<span>昨日</span>
						<span
							:class="{'data-down':statistic.growth_rate.duration<0,'data-up':statistic.growth_rate.duration>0}">
							{{statistic.yesterday.duration}} | {{statistic.growth_rate.duration}}%
							<AppIcons icon="CaretTop" class="up-icon" :size="14" />
							<AppIcons icon="CaretBottom" class="down-icon" :size="14" />
						</span>
					</div>
				</div>
			</div>
			<div class="col statistic-card">
				<el-statistic :value="statistic.today.orders_num">
					<template #title>
						<div style="display: inline-flex; align-items: center">
							订单量
							<el-tooltip effect="dark" content="仅计算今日完成的订单" placement="top">
								<AppIcons icon="Warning" style="margin-left: 4px" :size="12" />
							</el-tooltip>
						</div>
					</template>
					<template #suffix>单</template>
				</el-statistic>
				<div class="statistic-footer">
					<div class="footer-item">
						<span>昨日</span>
						<span
							:class="{'data-down':statistic.growth_rate.orders_num<0,'data-up':statistic.growth_rate.orders_num>0}">
							{{statistic.yesterday.orders_num}} | {{statistic.growth_rate.orders_num}}%
							<AppIcons icon="CaretTop" class="up-icon" :size="14" />
							<AppIcons icon="CaretBottom" class="down-icon" :size="14" />
						</span>
					</div>
				</div>
			</div>
			<div class="col statistic-card">
				<el-statistic :value="statistic.today.orders_price">
					<template #title>
						<div style="display: inline-flex; align-items: center">
							营业额
							<el-tooltip effect="dark" content="仅计算今日完成的订单" placement="top">
								<AppIcons icon="Warning" style="margin-left: 4px" :size="12" />
							</el-tooltip>
						</div>
					</template>
					<template #suffix>元</template>
				</el-statistic>
				<div class="statistic-footer">
					<div class="footer-item">
						<span>昨日</span>
						<span
							:class="{'data-down':statistic.growth_rate.orders_price<0,'data-up':statistic.growth_rate.orders_price>0}">
							{{statistic.yesterday.orders_price}} | {{statistic.growth_rate.orders_price}}%
							<AppIcons icon="CaretTop" class="up-icon" :size="14" />
							<AppIcons icon="CaretBottom" class="down-icon" :size="14" />
						</span>
					</div>
				</div>
			</div>
		</div>
		<div class="flex-1 statistic-card">
			<el-radio-group v-model="search.day" size="small" @change="initify" class="search-day">
				<el-radio-button label="3天" :value="3" />
				<el-radio-button label="7天" :value="7" />
				<el-radio-button label="15天" :value="15" />
				<el-radio-button label="30天" :value="30" />
			</el-radio-group>
			<div ref="echarts" style="width:100%;height:100%;"></div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				statistic: {
					technician: {
						sum: 0,
						resting: 0,
						idle: 0,
						working: 0,
						alarm: 0
					},
					today: {
						person_time: 0,
						duration: 0,
						orders_num: 0,
						orders_price: 0
					},
					yesterday: {
						person_time: 0,
						duration: 0,
						orders_num: 0,
						orders_price: 0
					},
					growth_rate: {
						person_time: 0,
						duration: 0,
						orders_num: 0,
						orders_price: 0
					}
				},
				search: {
					shop_id: '',
					day: 7
				},
				shops: []
			};
		},
		created() {
			this.$userApp.getUserInfo();
			this.initify();
			this.$nextTick(() => {
				this.echarts = this.$echarts.init(this.$refs.echarts);
				let option = {
					color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
					title: {
						text: '数据可视化'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						}
					},
					toolbox: {
						show: false
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [
						{
							type: 'category',
							boundaryGap: false,
						}
					],
					yAxis: [
						{
							type: 'value'
						}
					]
				};

				// 使用刚指定的配置项和数据显示图表。
				this.echarts.setOption(option);
				let resizeEr;
				window.addEventListener('resize', () => {
					if (resizeEr) {
						clearTimeout(resizeEr);
					}
					resizeEr = setTimeout(() => {
						this.echarts.resize({ silent: true });
					}, 300);
				})
			})
		},
		methods: {
			initify() {
				this.$http.useGet("app/ycMassage/shop/Index/statistic", this.search).then(res => {
					this.statistic = res.data.statistic;
					this.shops = res.data.shops;
					this.setEchartsOptions(res.data.echarts);
				});
			},
			setEchartsOptions(data) {
				data.series.map(item => {
					if (item.areaStyle && item.areaStyle.LinearGradient) {
						item.areaStyle.color = new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, item.areaStyle.LinearGradient);
					}
					return item;
				})

				// 使用刚指定的配置项和数据显示图表。
				this.echarts.setOption(data);
			},
			goToAlarm() {
				const appid = this.$siteApp.siteInfo.appid;
				this.$router.push({
					path: '/Alarm/index',
					query: {
						appid: appid
					},
				});
			}
		}
	}
</script>
<style>
	.container {
		display: flex;
		flex-direction: column;
		gap: 16px;
		height: 100%;
	}

	.gap-16px {
		display: grid;
		grid-template-columns: repeat(24, minmax(0px, 1fr));
		gap: 16px;
	}

	.gap-16px .col {
		grid-column: span 6 / span 6;
	}

	.gap-16px .col-8 {
		grid-column: span 8 / span 8;
	}

	.gap-16px .col-12 {
		grid-column: span 12 / span 12;
	}

	.gap-16px .col-24 {
		grid-column: span 24 / span 24;
		grid-row: 1fr;
	}

	.el-statistic {
		--el-statistic-content-font-size: 28px;
	}

	.p-8 {
		padding: 20px;
	}

	.statistic-card {
		padding: 20px;
		border-radius: 4px;
		background-color: var(--el-bg-color-overlay);
		position: relative;
	}

	.search-day {
		position: absolute;
		right: 5px;
		top: 5px;
		z-index: 9999;
	}

	.technician-card {
		border-radius: 4px;
		background-color: var(--el-color-primary-light-7);
	}

	.technician-card .el-statistic {
		--el-statistic-content-color: var(--el-color-primary);
	}

	.statistic-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		font-size: 12px;
		color: var(--el-text-color-regular);
		margin-top: 16px;
	}

	.statistic-footer .footer-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.statistic-footer .footer-item span:last-child {
		display: inline-flex;
		align-items: center;
		margin-left: 4px;
	}

	.el-statistic__suffix {
		font-size: 14px;
		color: var(--el-color-info);
	}

	.data-down {
		color: var(--el-color-success);
	}

	.data-up {
		color: var(--el-color-error);
	}

	.up-icon,
	.down-icon {
		display: none;
	}

	.data-up .up-icon {
		display: inline;
	}

	.data-down .down-icon {
		display: inline;
	}

	.pointer {
		cursor: pointer;
	}
</style>